import IconFont from '@/utils/iconFont';
import React from 'react';
import style from './style.less';
import { Image, Popover } from 'antd';
import Avatar from '@public/images/avatar.svg';
import { history } from 'umi';

const content = (
  <a
    onClick={() => {
      history.push('/login');
      localStorage.removeItem('isLogin');
    }}
  >
    退出登录
  </a>
);

const Header = () => {
  return (
    <div className={style.header}>
      <div className={style['header-left']}>
        <IconFont className={style['icon']} type="icon-demo4" />
        设计模式
      </div>
      <div className={style['header-right']}>
        <Popover placement="bottomRight" content={content} trigger="click">
          <div style={{ display: 'flex' }}>
            <Image src={Avatar} preview={false} />
            <span style={{ marginLeft: 10 }}>design-pattern</span>
          </div>
        </Popover>
      </div>
    </div>
  );
};
export default Header;
